<template>
    <div class="login">
      <div class="logo">
        <h1>光谷智慧交通系统</h1>
      </div>
      <div class="loginBox">
        <h2>登 录</h2>
        <div class="userType">
          <div
            class="user"
            @click="handleUserType('common')"
            :class="{ active: userData.type === 'common' }"
          >
            普通用户
          </div>
          <div
            class="user"
            @click="handleUserType('traffic')"
            :class="{ active: userData.type === 'traffic' }"
          >
            交管部门
          </div>
          <div
            class="user"
            @click="handleUserType('admin')"
            :class="{ active: userData.type === 'admin' }"
          >
            管理员
          </div>
        </div>
        <el-form :model="userData">
          <el-input
            v-model.trim="userData.username"
            style="width: 300px; margin-bottom: 30px"
            placeholder="用户名"
            clearable
          />
          <el-form-item
            prop="password"
            :rules="[
              { required: true, message: '请输入密码', trigger: 'blur' },
            ]"
          >
            <el-input
              v-model="userData.password"
              style="width: 300px"
              type="password"
              placeholder="请输入密码"
              show-password
            />
          </el-form-item>
        </el-form>
        <div class="remember">
          <el-checkbox>记住我</el-checkbox>
          <p>
            <router-link
              style="text-decoration: none; color: #409eff"
              to="/changePassword"
              >修改密码</router-link
            >
          </p>
        </div>
        <div class="loginBtn">
          <Vcode :show="isLook" @success="onSuccess" @close="onClose" />
          <el-button
            type="primary"
            plain
            style="width: 100px; margin-bottom: 20px"
            @click="onShow"
            >立即登录</el-button
          >
        </div>
        <p v-if="isShow" class = "error">
          没有账号？<router-link
            style="text-decoration: none; color: #409eff"
            to="/register"
            >立即注册</router-link
          >
        </p>
        <div class="userImg">
          <img src="@/assets/images/traffic.png" alt="" v-if="trafficImg" />
          <img src="@/assets/images/admin.png" alt="" v-if="adminImg" />
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { useRouter } from 'vue-router'
  import { loginHttp } from '@/request/index'
  import { useUserDateStore } from '@/stores/user'
  import { ElMessage } from 'element-plus'
  import 'element-plus/theme-chalk/el-message.css'
  import Vcode from 'vue3-puzzle-vcode'
  
  /* element-plus组件的alert消息提示 */
  const open = () => {
    ElMessage({
      message: '用户名或密码错误',
      type: 'error',
      plain: true,
    })
  }
  
  const isShow = ref(true) //切换用户时，是否显示注册
  const trafficImg = ref(false)
  const adminImg = ref(false)
  const isLook = ref(false) //是否显示验证码
  
  const router = useRouter()
  const { userData, handleType } = useUserDateStore()
  
  // 显示验证码
  const onShow = () => {
    isLook.value = true
  }
  // 关闭验证码
  const onClose = () => {
    isLook.value = false
  }
  const onSuccess = () => {
    isLook.value = true
    handleLogin()
  }
  // 用户登录
  const handleLogin = async () => {
    const res = await loginHttp(userData)
    if (res.code === 200 && userData.type === 'common') {
      router.push('/normal')
      localStorage.setItem('token', res.token)
      localStorage.setItem('username', userData.username)
      localStorage.setItem('type', userData.type)
    } else if (res.code === 200 && userData.type === 'traffic') {
      router.push('/traffic')
      localStorage.setItem('token', res.token)
      localStorage.setItem('username', userData.username)
      localStorage.setItem('type', userData.type)
    } else if (res.code === 200 && userData.type === 'admin') {
      router.push('/admin')
      localStorage.setItem('token', res.token)
      localStorage.setItem('username', userData.username)
      localStorage.setItem('type', userData.type)
    } else {
      open()
    }
  }
  // 切换用户类型
  const handleUserType = (type) => {
    userData.type = type
    isShow.value = type === 'common' // 只有普通用户时显示注册
    trafficImg.value = type === 'traffic'
    adminImg.value = type === 'admin'
    handleType(type)
  }
  </script>
  
  <style lang="scss" scoped>
  .login {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 100vh;
    background-image: url('@/assets/images/bg.jpg');
    background-size: cover;
    h1 {
      position: absolute;
      top: 40%;
      left: 25%;
      transform: translate(-50%, -50%);
      color: #fff;
      font-size: 80px;
      font-weight: bold;
      text-shadow: 2px 2px 5px #999;
    }
    .loginBox {
      position: absolute;
      top: 50%;
      left: 70%;
      transform: translate(-50%, -50%);
      width: 450px;
      padding: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
      border-radius: 10px;
      background-color: #fff;
      .userType {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 10px;
        width: 300px;
        height: 30px;
        margin-top: 20px;
        line-height: 30px;
        border-bottom: #edebeb solid 0.5px;
        margin-bottom: 20px;
        .user {
          color: #999;
          &:hover {
            color: #409eff;
            cursor: pointer;
          }
        }
      }
      h2 {
        text-align: center;
        font-size: 30px;
        color: #333;
        margin-bottom: 30px;
      }
      .remember {
        display: flex;
        justify-content: space-around;
        align-items: center;
        gap: 165px;
        margin-top: 10px;
        margin-bottom: 20px;
        p {
          color: #409eff;
        }
      }
      p {
        text-align: center;
        font-size: 14px;
        color: #666;
      }
      
    }
    .userImg {
      img {
        width: 25px;
        height: 25px;
      }
    }
  }
  .active {
    color: #409eff !important;
  }
  </style>
  